<template>
    <div>
        <Header :tap="title"/>
        <div class="tab_box">
            <div class="tap">
                <a href="javascript:;" class="color">tab1</a>
                <a href="javascript:;">tab2</a>
            </div>
            <div class="bottom">
                <div class="one show">内容1</div>
                <div class="one">内容2</div>
            </div>
        </div>
        <Footer />
    </div>
</template>
<script>
import Header from "../commons/header.vue";
import Footer from "../commons/footer.vue";
import $ from "jquery";
export default {
  data() {
    return {
      title: "购物车"
    };
  },
  mounted() {
    $(function() {
      $(".tap").on("click", "a", function() {
        var index = $(this).index();
        $(this)
          .addClass("color")
          .siblings()
          .removeClass("color");
        $(".bottom .one")
          .eq(index)
          .addClass("show")
          .siblings()
          .removeClass("show");
      });
    });
  },
  components: {
    Header,
    Footer
  }
};
</script>
<style scoped>
.bottom .one.show {
  display: block;
}
.color {
  color: red;
  background-color: aqua;
}
.bottom .one {
  display: none;
  background-color: burlywood;
}
.tap {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.tap a {
  width: 50%;
  display: block;
  float: left;
  text-align: center;
}
</style>


